import React, { useRef, useState } from 'react'
import { PlusOutlined, HomeOutlined, ContactsOutlined, ClusterOutlined } from '@ant-design/icons';
import { Tag, Input, Divider, Avatar } from 'antd'
import { PresetColorTypes } from 'antd/lib/_util/colors';
import styles from "./Person.less"
import AvatarJpg from '@/assets/images/avatar.jpg'

const TagList = ({ tags }) => {

  const ref = useRef(null);
  const [newTags, setNewTags] = useState([]);
  const [inputVisible, setInputVisible] = useState(false);
  const [inputValue, setInputValue] = useState('');

  const showInput = () => {
    setInputVisible(true);

    if (ref.current) {
      // eslint-disable-next-line no-unused-expressions
      ref.current?.focus();
    }
  };

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  const handleInputConfirm = () => {
    let tempsTags = [...newTags];

    if (inputValue && tempsTags.filter((tag) => tag.label === inputValue).length === 0) {
      tempsTags = [
        ...tempsTags,
        {
          key: `new-${tempsTags.length}`,
          label: inputValue,
        },
      ];
    }

    setNewTags(tempsTags);
    setInputVisible(false);
    setInputValue('');
  };

  const getRandomTagColor = () => {
    return PresetColorTypes[Math.floor(Math.random() * PresetColorTypes.length)];
  }

  return (
    <div className={styles.tags}>
      {/* <div className={styles.tagsTitle}>标签</div> */}
      {(tags || []).concat(newTags).map((item) => (
        <Tag color={getRandomTagColor()} key={item.key}>{item.label}</Tag>
      ))}
      {inputVisible && (
        <Input
          ref={ref}
          type="text"
          size="small"
          style={{
            width: 78,
          }}
          value={inputValue}
          onChange={handleInputChange}
          onBlur={handleInputConfirm}
          onPressEnter={handleInputConfirm}
        />
      )}
      {!inputVisible && (
        <Tag
          onClick={showInput}
          style={{
            borderStyle: 'dashed',
          }}
        >
          <PlusOutlined />
        </Tag>
      )}
    </div>
  );
};

const tags = [
  { key: "Java", label: 'Java' },
  { key: "台球", label: '台球' },
  { key: "羽毛球", label: '羽毛球' },
  { key: "书法", label: '书法' },
  { key: "烹饪", label: '烹饪' },
  { key: "Apex", label: 'Apex' },
]

const currentUser = {
  title: '后端开发工程师',
  group: '架构团队－后端基础平台组',
  geographic: {
    province: {
      label: '广东省',
      key: '330000',
    },
    city: {
      label: '深圳市',
      key: '330100',
    },
  }
}

const renderUserInfo = () => (
  <div className={styles.detail}>
    <p>
      <ContactsOutlined
        style={{
          marginRight: 8,
        }}
      />
      {currentUser.title}
    </p>
    <p>
      <ClusterOutlined
        style={{
          marginRight: 8,
        }}
      />
      {currentUser.group}
    </p>
    <p>
      <HomeOutlined
        style={{
          marginRight: 8,
        }}
      />
      {
        (
          currentUser.geographic || {
            province: {
              label: '',
            },
          }
        ).province.label
      }
      {
        (
          currentUser.geographic || {
            city: {
              label: '',
            },
          }
        ).city.label
      }
    </p>
  </div>
);

function Person() {

  return (
    <div style={{ backgroundColor: 'white', borderRadius: '.2rem', paddingBottom: 12, boxShadow: '0 1px 3px rgb(18 18 18 / 10%)' }}>
      <div className={styles.avatarHolder}>
        {/* <img alt="" src={AvatarJpg} /> */}
        <Avatar size={104} src={AvatarJpg} draggable={false} style={{ marginBottom: '20px' }} />

        <div className={styles.name}>借力好风</div>
        <div>小心脏 大宇宙</div>
      </div>

      {renderUserInfo()}

      <Divider orientation="left" dashed></Divider>

      <TagList tags={tags} />
      {/* <Divider style={{ marginTop: 16 }} dashed /> */}

    </div>
  )
}

export default Person
